import { computed, defineComponent } from 'vue'
import './style/index'

export default defineComponent({
  name: 'Divider',
  props: {
    color: {
      type: String,
      default: '#ccc',
    },
    direction: {
      type: String,
      default: 'horizontal',
      validate: (val) => {
        return ['horizontal', 'vertical'].includes(val)
      }
    },
    margin: {
      type: String,
    },
    borderStyle: {
      type: String,
      default: 'solid',
      validate: (val) => {
        return [
          'none', 'hidden', 'dotted', 'dashed',
          'solid', 'double', 'groove', 'ridge',
          'inset', 'outset'
        ].includes(val)
      }
    },
  },
  setup(props) {
    console.log(props)
    const customStyles = computed(() => {
      return {
        display: props.direction === 'horizontal' ? 'block' : 'inline-block',
        margin: props.margin || (props.direction === 'horizontal' ? '10px 0' : '0 10px'),
        borderTop: props.direction === 'horizontal' ?  `1px ${props.borderStyle} ${props.color}` : 'none',
        borderLeft: props.direction === 'vertical' ?  `1px ${props.borderStyle} ${props.color}` : 'none',
      }
    })

    return () => (
      <div
        class={[
          'divider',
          props.direction === 'horizontal' ? 'divider--horizontal' : 'divider--vertical',
        ]}
        style={customStyles.value}
      ></div>
    )
  },
})
